<template>
  <div class="main">
    <div class="warp">
      <div class="sideWarp">
        <div class="title">{{query.host}} :</div>
      </div>
      <div class="tagWarp">
        <div :class="['tag', n.select ? 'active':'']" v-for="(n, idx) in list"
             :key="idx" @click="searchClick(n)">{{n.virus_species}}</div>
      </div>
    </div>

    <statistical-view v-if="query.virusSpecies" :options="query"/>
  </div>
</template>

<script>
import {getSpecies} from "../../api/browse";
import StatisticalView from "../components/statisticalView";

export default {
  name: "hostOverviwe",
  components: {StatisticalView},
  data() {
    return {
      list: [],
      selectSpecies: {},
      query: {
        host: null,
        virusSpecies: null,
      },
      isFristInto: true,
    }
  },
  mounted() {
    this.query.host = this.$route.query.host;

    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await getSpecies({host: this.query.host})

      // 按字母大小排序
      res.data.sort((a,b) => {
        if (a.virus_species == "None") {
          return 1
        }
        return a.virus_species.localeCompare(b.virus_species);
      });
      this.list = res.data

      if (this.isFristInto) {
        this.isFristInto = false
        this.searchClick(this.list[0])
      }
    },
    searchClick(n) {
      this.selectSpecies.select = false
      n.select = true
      this.selectSpecies = n
      this.query.virusSpecies = n.virus_species;
    },
  }
}
</script>

<style lang="stylus" scoped>

.main {
  width 1170px
  margin-top 20px
  font-family: Times New Roman;
  padding-top 30px

  .headWarp {
    display flex
    flex-direction column
    align-items center
    margin 80px 60px 60px 60px
    font-weight 900
    font-size 25px
    color #0a2458
    text-align center
    font-family: Times New Roman;

    .line {
      margin-top 10px
      width 120px
      height 1px
      background-color #0a2458
    }
  }


  .warp {
    display flex
    font-family: Times New Roman;
    margin-bottom: 30px;
  }

  .sideWarp {
    width 240px
    padding-left: 20px;
    margin-right 30px
    flex-shrink: 0;

    .title {
      position: relative;
      font-size 20px
      font-weight 500
      color #0a2458
    }

    .title::before {
      background-color: #aa604f;
      content: "";
      width: 3px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -20px;
      transition: .2s ease;
    }
  }

  .tagWarp {
    display flex
    flex-wrap wrap


    .tag {
      color #989898
      margin-right 20px
      margin-bottom 20px
      font-size 20px
      font-weight 500
      cursor pointer
    }
    .tag:hover, .active {
      color #0a2458
      text-decoration underline
    }
  }

}
</style>
